<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>胖头鱼的个人博客 | 后台管理</title>

    <link rel="stylesheet" th:href="@{/my/css/reset.css}">
    <link rel="stylesheet" th:href="@{/element-ui/css/element-ui.css}">

    <link rel="stylesheet" th:href="@{/my/css/admin/fragment.css}">
    <link rel="stylesheet" th:href="@{/my/css/admin/list.css}">

</head>
<body>

<div id="app">
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">
                <el-row class="tac">
                    <el-col :span="24">
                        <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo"
                                background-color="transparent">
                            <el-menu-item index="1" @click="home">
                                <i class="el-icon-s-home"></i>
                                <span slot="title">进入首页</span>
                            </el-menu-item>
                            <el-menu-item index="2" @click="list">
                                <i class="el-icon-folder-checked"></i>
                                <span slot="title">博文列表</span>
                            </el-menu-item>
                            <el-menu-item index="3" @click="add">
                                <i class="el-icon-circle-plus-outline"></i>
                                <span slot="title">添加博文</span>
                            </el-menu-item>
                            <el-menu-item index="4" @click="time">
                                <i class="el-icon-plus"></i>
                                <span slot="title">添时间线</span>
                            </el-menu-item>
                            <el-menu-item index="5" @click="change">
                                <i class="el-icon-unlock"></i>
                                <span slot="title">修改密码</span>
                            </el-menu-item>
                            <el-menu-item index="6" @click="logout">
                                <i class="el-icon-switch-button"></i>
                                <span slot="title">注销登录</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <div class="top">
                    <el-card>
                        <div>
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item><a href="/admin/">首页</a></el-breadcrumb-item>
                                <el-breadcrumb-item><a href="/admin/list">博文列表</a></el-breadcrumb-item>
                            </el-breadcrumb>
                        </div>
                    </el-card>
                </div>
                <div class="body">
                    <el-card>
                        <div>
                            <el-table
                                    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                                    style="width: 100%">
                                <el-table-column
                                        label="Title"
                                        prop="title">
                                </el-table-column>
                                <el-table-column
                                        label="Img"
                                        prop="cover">
                                    <template slot-scope="scope">
                                        <div class="demo-image">
                                            <el-image
                                                    style="height: 100px;"
                                                    :src="scope.row.url"
                                                    fit="scale-down">
                                            </el-image>
                                        </div>
                                    </template>
                                </el-table-column>
<!--                                <el-table-column-->
<!--                                        label="Author"-->
<!--                                        prop="author">-->
<!--                                </el-table-column>-->
                                <el-table-column
                                        label="Date"
                                        prop="createDate">
                                </el-table-column>
                                <el-table-column
                                        align="right">
                                    <template slot="header" slot-scope="scope">
                                        <el-input
                                                v-model="search"
                                                size="mini"
                                                placeholder="输入关键字搜索"></el-input>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-button
                                                size="mini"
                                                @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                                        <el-button
                                                size="mini"
                                                type="danger"
                                                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                </div>
                <div class="footer">
                    <el-card>
                        <div>
                            <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="1000">
                            </el-pagination>
                        </div>
                    </el-card>
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>

<!-- vue.js -->
<script th:src="@{/vue/vue.js}"></script>
<script th:src="@{/axios/axios.min.js}"></script>
<script th:src="@{/element-ui/js/element-ui.js}"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            tableData: [{
                title: 'Thymeleaf 模板引擎',  // 标题
                url: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',  // 封面
                author: '胖头鱼',  // 作者
                createDate: '2022-12-12',  // 日期
            }],
            search: '',
        },
        methods: {
            home() {
                console.log('home');
                setTimeout(() => {
                    location.href = '/admin/';
                },100)
            },
            list() {
                console.log('list');
                setTimeout(() => {
                    location.href = '/admin/list';
                },100)
            },
            add() {
                console.log('add');
                setTimeout(() => {
                    location.href = '/admin/add';
                },100)
            },
            time() {
                console.log('add');
                setTimeout(() => {
                    location.href = '/admin/time';
                },1)
            },
            change() {
                console.log('change');
                setTimeout(() => {
                    location.href = '/admin/change';
                },1)
            },
            logout() {
                axios.get("/admin/logout").then(res => {
                    if ( res.data.code === 200) {
                        this.$message.success("注销成功");
                        localStorage.setItem("token", "No");
                        setTimeout(() => {
                            location.href = '/';
                        },1500)
                    }
                })
            },
            handleEdit(index, row) {
                this.$message.warning("该功能还未开放");
            },
            handleDelete(index, row) {
                // console.log(index, row);
                console.log(row.id)
                axios.get("/admin/delete?id=" + row.id).then(res => {
                    if ( res.data.code === 200) {
                        this.$message.success(res.data.msg);
                        setTimeout(() => {
                            this.selectList();
                        }, 500);
                    } else {
                        this.$message.warning(res.data.msg);
                    }
                })
            },
            selectList() {
                axios.get("/admin/selectList").then(res => {
                    this.tableData = res.data;
                })
            }
        },
        created() {
            this.selectList();
        }
    })
</script>


</body>
</html>